@charset "utf-8";
/* 全局样式
----------------------------------------------*/
html,body{ height:100%; font-size:10px;  }
body,h1,h2,h3,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea,img{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:"Microsoft Yahei"; background:#f5f5f5; }
ol,ul{ list-style:none; }
.arrow{ position:absolute; display:block; left:50%; bottom:5px; margin-left:-10px; width:25px; height:18px; background:url("../images/arrow.png") center center no-repeat; background-size:contain; z-index:999; animation:start 1.5s infinite ease-in-out; -webkit-animation:start 1.5s infinite ease-in-out; }
.swiper-container{ width:100%; height:120%; }
.bg-1{ background:#ffffff; }
.bg-2{ background:#ebebec; }
.bg-3{ background:#67217a; }
.bg-4{ background:#8dd503; }
.bg-5{ background:#3799e0; }
.bg-6{ background:#19a155; }
.bg-7{ background:#d04639; }
.title{ position:absolute; top:8%; left:0; right:0; text-align:center; }
	.title h1{ margin-bottom:.2rem; color:#333; font-size:20px; font-weight:block; }
	.title p{ color:#999; font-size:16px; }
	.title.white h1{ color:#fff; }
	.title.white p{ color:#f0f0f0; font-size:16px;}
	.title.bottom{ top:auto; bottom:10%; }
	
.titlea{ position:absolute;top:30%;right:68%;text-align:right;width:350px;}
	.titlea h1{ margin-bottom:.2rem; color:red; font-size:20px; font-weight:block; }
	.titlea p{ color:#999; font-size:16px;}
	.titlea.white h1{ color:#fff; }
	.titlea.white p{ color:#f0f0f0; font-size:16px;}
	.titlea.bottom{ top:auto; bottom:10%; }
	
.titleb{ position:absolute;top:55%;right:68%;text-align:right;width:400px;}
	.titleb h1{ margin-bottom:.2rem; color:red; font-size:20px; font-weight:block; }
	.titleb p{ color:#999; font-size:16px;}
	.titleb.white h1{ color:#fff; }
	.titleb.white p{ color:#f0f0f0; font-size:16px;}
	.titleb.bottom{ top:auto; bottom:10%; }	
	
.titlec{ position:absolute;top:80%;right:68%;text-align:right;width:400px;}
	.titlec h1{ margin-bottom:.2rem; color:red; font-size:20px; font-weight:block; }
	.titlec p{ color:#999; font-size:16px;}
	.titlec.white h1{ color:#fff; }
	.titlec.white p{ color:#f0f0f0; font-size:16px;}
	.titlec.bottom{ top:auto; bottom:10%; }
	
	
	
.titlea1{ position:absolute;top:30%;left:68%;right:0;text-align:left;width:360px;}
	.titlea1 h1{ margin-bottom:.2rem; color:red; font-size:20px; font-weight:block; }
	.titlea1 p{ color:#999; font-size:16px;}
	.titlea1.white h1{ color:#fff; }
	.titlea1.white p{ color:#f0f0f0; font-size:16px;}
	.titlea1.bottom{ top:auto; bottom:10%; }
	
.titleb2{ position:absolute;top:55%;left:68%;right:0;text-align:left;width:360px;}
	.titleb2 h1{ margin-bottom:.2rem; color:red; font-size:20px; font-weight:block; }
	.titleb2 p{ color:#999; font-size:16px; }
	.titleb2.white h1{ color:#fff; }
	.titleb2.white p{ color:#f0f0f0; font-size:16px;}
	.titleb2.bottom{ top:auto; bottom:10%; }	
	
.titlec3{ position:absolute;top:80%;left:68%;right:0;text-align:left;width:360px;}
	.titlec3 h1{ margin-bottom:.2rem; color:red; font-size:20px; font-weight:block; }
	.titlec3 p{ color:#999; font-size:16px; }
	.titlec3.white h1{ color:#fff; }
	.titlec3.white p{ color:#f0f0f0; }
	.titlec3.bottom{ top:auto; bottom:10%; }
	
	
.img-1{ position:absolute; top:5rem; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; }
	.img-1 img{ display:block; max-width:80%; max-height:80%; }
.img-2{ position:absolute; top:5rem; left:0; right:0; bottom:0;}

	.img-2 .img-box-1{ position:absolute; top:0; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; }
	.img-2 .img-box-2{ position:absolute; top:0; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; }
	.img-2 .img-box-2 img{width:800px;height:455px;}

	.img-2 .img-box-3{ position:absolute; top:0; bottom:0; left:50%; right:0; display:flex; justify-content:center; align-items:center; }
	.img-2 .img-box-1>img,
	.img-2 .img-box-2>img,
	.img-2 .img-box-3>img{ display:block; max-width:100%; max-height:100%; }
.img-3{ position:absolute; top:6rem; left:2%; right:2%; bottom:8%; }
	.img-3 .img-box-1{ position:absolute; top:55%; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; }
	.img-3 .img-box-2{ position:absolute; top:-15%; bottom:15%; left:0; right:0; display:flex; justify-content:center; align-items:center; }
	.img-3 .img-box-2 img{width:1100px;height:700px;}
	.img-3 .img-box-3{ position:absolute; top:5%; bottom:66%; left:10%; right:10%; display:flex; justify-content:center; align-items:center; }
	.img-3 .img-box-1>img,
	.img-3 .img-box-2>img,
	.img-3 .img-box-3>img{ display:block; max-width:100%; max-height:100%; }
.img-5{ position:absolute; top:0; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; }
	.img-5 .img-box{ position:absolute; top:8%; left:10%; right:10%; bottom:22%; display:flex; justify-content:center; align-items:center; }
	.img-5 .img-box>img{ display:block; max-width:95%; max-height:95%; }
	.img-5>img{ display:block; max-width:90%; max-height:90%; }
.img-6{ position:absolute; top:6rem; left:8%; right:8%; bottom:8%; }
	.img-6 .left{ position:absolute; top:0; left:0; right:55%; bottom:0; display:flex; justify-content:flex-end; align-items:center; }
	.img-6 .left img{ display:block; max-width:100%; max-height:100%; }
	.img-6 .right{ position:absolute; top:0; left:40%; right:0; bottom:0; display:flex; justify-content:flex-start; align-items:center; }
	.img-6 .right img{ display:block; max-width:100%; max-height:100%; }
	
	

/*响应式布局
----------------------------------------------*/
@-webkit-keyframes start{ 0%, 30%{ opacity:0; -webkit-transform:translate(0, 10px); }
 60%{ opacity:1; -webkit-transform:translate(0, 0); }
 100%{ opacity:0; -webkit-transform:translate(0, -8px); }
}
@-moz-keyframes start{ 0%, 30%{ opacity:0; -moz-transform:translate(0, 10px); }
 60%{ opacity:1; -moz-transform:translate(0, 0); }
 100%{ opacity:0; -moz-transform:translate(0, -8px); }
}
@keyframes start{ 0%, 30%{ opacity:0; transform:translate(0, 10px); }
 60%{ opacity:1; transform:translate(0, 0); }
 100%{ opacity:0; transform:translate(0, -8px); }
}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:12px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:12px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:12px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:12px}}
@media screen and (min-width:800px){html{font-size:22px}}